<template>
    <p>这是一个home页</p>
    <h1>js路由跳转</h1>
    <button @click="pushStr">字符串</button>
    <button @click="pushPath">push-path-跳转</button>
    <button @click="pushPathQuery">push-path-query</button>
    <button @click="pushName">push-name</button>
    <button @click="pushNameParams">push-name-params</button>
    <button @click="pushDynRouteByPath">动态路由-paht-传参</button>
    <button @click="pushDynRouteByName">动态路由-name-传参</button>
    <button @click="pushDynRouteMulParams">动态路由-多个入参</button>
    <h1>Vuex</h1>
    <button @click="updateVuexCount">修改count</button>
    <button @click="updateVuexCountByObj">修改count-对象方式</button>
    <button @click="getCount">actions-接口请求</button>
    <button @click="getCountByObj">actions-接口请求-对象方式</button>

 <h1>Vuex module</h1>
    <button @click="commitIncreaseA">触发-moduleA-muations</button>
    <button @click="commitAsyncIncreaseA">触发-moduleA-actions</button>
    <button @click="commitIncreaseB">触发-moduleB-muations</button>
    <button @click="commitAsyncIncreaseB">触发-moduleB-actions</button>

</template>
<script>
export default {
    methods: {
        pushStr(){
            this.$router.push('/about')
        },
        pushPath(){
            this.$router.push({path:'/about'})
        },
        pushPathQuery(){
            this.$router.push({path:'/about',query:{name:'tom'}})
        },
        pushName(){
            this.$router.push({name:'about'})
        },
        pushNameParams(){
           // this.$router.push({name:'about',params:{name:'tom',id:1}})
            this.$router.push({name:'about',state:{id:1,name:'tom'}})
        },
        pushDynRouteByPath(){
            const id = 123
            this.$router.push({path:'/product'+'/'+id})
        },
        pushDynRouteByName(){
            this.$router.push({name:'product', params:{id:456}})
        },
        pushDynRouteMulParams(){
            this.$router.push({name:'product',params:{id:123,name:'liyan'}})
        },
        updateVuexCount(){
            this.$store.commit('incrementMut',{count:10})
        },
        updateVuexCountByObj(){
            this.$store.commit({type:'incrementMut',count:30})
        },
        getCount(){
            this.$store.dispatch('incrementAct',{count:200})
        },
        getCountByObj(){
            this.$store.dispatch({
                type:'incrementAct',
                count:152
            })
        },
        commitIncreaseA(){
            this.$store.commit('increaseA')
        },
        commitAsyncIncreaseA(){
            this.$store.dispatch('asyncIncreaseA')
        },
        commitIncreaseB(){
            this.$store.commit('b/increaseB')
        },
        commitAsyncIncreaseB(){
            this.$store.dispatch('b/asyncIncreaseB')
        },
    },
    mounted(){
        console.log("this.$route",this.$route)
        console.log("this.$router",this.$router)
    }
}
</script>